<!DOCTYPE html>
<html dir='ltr'>
    
    <head>
        <meta charset='utf-8'>
        <meta content='width=device-width,initial-scale=1,maximum-scale=1' name='viewport'>
        <meta content='online css compressor,online css beautifier,online css decompressor' name='keywords'>
        <meta content='Lightweight CSS tool for quick time editing' name='description'>
        <meta content='Erwin AW' name='author'>
        <title>Online CSS Compressor & Beautifier</title>
        <link href='http:/svn/css-compressor-and-beautifier/favicon.ico' rel='shortcut icon' type='image/x-icon'>
        <link rel='stylesheet' href='/svn/css-compressor-and-beautifier/style.css' type='text/css' media='screen'>
    </head>
    
    <body>
        <div id='page-wrap'>
          <div id="editor-fixed"><h2 style="position:absolute;top:20px;left:15px;font-weight:normal;color:#999;"><a style="text-decoration:none" href="/svn/css-compressor-and-beautifier/index.html">COMPRESS OR BEAUTIFY CSS CODE</a></h2><div style="float:right;margin-right:30px;margin-top:-5;z-index:9999;"><a href="http://plus.google.com/110427561132306995404/about"><img alt='Erwin AW' src='http://lh5.googleusercontent.com/-HAZF9uHF1_w/AAAAAAAAAAI/AAAAAAAAAAA/aL3qXgDy-RA/s49-c/photo.jpg' title='Erwin-AW'/></a></div></div>
            <div class='clear'></div>
            <div class='col left'><input type='checkbox' id='highlightCode' checked> <label for='highlightCode'>Show highlighted code?</label> <span class='right'><button onclick='clearField("cssField");'>Clear Field</button> <button onclick='selectAll("cssField");'>Select All</button></span>
                <span
                class='clear'></span>
                    <textarea spellcheck='false' id='cssField' placeholder='Paste your CSS code here...'></textarea>
            </div>
            <div class='col right'>
                <div class='button-group'>
                    <div class='box'>
                        <p>
                            <input type='checkbox' id='stripAllComment'>
                            <label for='stripAllComment'>Strip all comments</label>
                        </p>
                        <p>
                            <input type='checkbox' id='superCompact'>
                            <label for='superCompact'>Super compact</label>
                        </p>
                        <p>
                            <input type='checkbox' id='betterIndentation'>
                            <label for='betterIndentation'>Keep indentation inside <code>@query {}</code>
                            </label>
                        </p>
                        <p>
                            <input type='checkbox' id='keepLastComma' checked>
                            <label for='keepLastComma'>Remove the last semicolon</label>
                        </p>
                    <button onclick='compressCSS("cssField");'>Compress CSS</button>                        
                    </div>                     
                </div>
                <div class='button-group'>
                    <div class='box'>
                        <p>
                            <input type='checkbox' id='inlineLayout' onchange='beautifyCSS("cssField");'>
                            <label for='inlineLayout'>Inline layout mode</label>
                        </p>
                        <p>
                            <input type='checkbox' onchange='beautifyCSS("cssField");' id='toTab'>
                            <label for='toTab'>Replace double space indentation with:</label>
                            <br>&emsp;&nbsp;<span id="tabOpt"><input type='radio' name='op' id='op-1' onchange='beautifyCSS("cssField");'> <label for='op-1'>A tab character</label> <input type='radio' name='op' id='op-2' onchange='beautifyCSS("cssField");'> <label for='op-2'>4 space</label></span>
                        </p>
                        <p>
                            <input type='checkbox' onchange='beautifyCSS("cssField");' id='breakSelector' checked>
                            <label for='breakSelector'>Break multiple selector (e.g: <code>html,<span style='color: rgb(38, 139, 210);'>\n</span>body,<span style='color: rgb(38, 139, 210);'>\n</span>table {}</code>)</label>
                        </p>
                        <p>
                            <input type='checkbox' onchange='beautifyCSS("cssField");' id='spaceBetween'>
                            <label for='spaceBetween'>Space after <code>:</code> and <code>,</code>
                            </label>
                        </p>
                        <p>
                            <input type='checkbox' onchange='beautifyCSS("cssField");' id='inlineSingleProp'>
                            <label for='inlineSingleProp'>Inline bracket for single property</label>
                        </p>
                        <p>
                            <input type='checkbox' onchange='beautifyCSS("cssField");' id='removeLastSemicolon'>
                            <label for='removeLastSemicolon'>Remove the last semicolon in single property</label>
                        </p>
                        <p>
                            <input type='checkbox' onchange='beautifyCSS("cssField");' id='singleBreak'>
                            <label for='singleBreak'>Compact line break</label>
                        </p> 
                    <button onclick='beautifyCSS("cssField");'>Beautify CSS</button>                         
                    </div>
                </div>
            </div>
            <div class='clear'></div>
            <h2 class='hidden'><button id="btn">Select All Code</button><pre id='highlightedResult'><code></code></pre></h2>
        </div>
      <script type='text/javascript' src='/svn/css-compressor-and-beautifier/css-compressor-and-beautifier.js'></script>    
    </body>
</html>